<template>
	<view class="qrcode">
		<image :src="qrcode_url" :show-menu-by-longpress="true" class="poster" mode="widthFix"></image>
		<view class="btns-wrap">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="box" @click="savePosterImg(1)">
				<image src="/static/images/common/down.png" class="nav-icon" mode="widthFix"></image>
				<view class="btns-name">保存到相册</view>
			</view>
			<view class="box" @click="onFriendShare">
				<view v-if="!!show_tip" class="tip">
					<view class="message">
						<image src="/static/images/common/finger.png" class="finger" mode="widthFix"></image>
						<view class="long">长按图片，即可快捷转发哦！</view>
					</view>
				</view>
				<image src="/static/images/common/wechat.png" class="nav-icon" mode="widthFix"></image>
				<view class="btns-name">微信好友</view>
			</view>
			<view class="box" @click="savePosterImg(2)">
				<image src="/static/images/common/line.png" class="nav-icon" mode="widthFix"></image>
				<view class="btns-name">朋友圈</view>
			</view>
			<!-- #endif  -->
			<!-- #ifdef H5 -->
			<view class="f34 tc ww100" type="default">长按保存图片</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			qrcode_url: '',
			show_tip: false
		}
	},
	mounted() {
		/*获取数据*/
		this.getData();
	},
	methods: {
		/*获取数据*/
		getData() {
			let self = this;
			uni.showLoading({
				title: '加载中',
			});
			let source = self.getPlatform();
			self._get('plus.agent.qrcode/poster', {
				source: source
			}, function(data) {
				uni.hideLoading();
				self.qrcode_url = data.data.qrcode;
			});
		},
		/*保存图片*/
		savePosterImg(type) {
			let self = this;
			this.show_tip = false;
			uni.showLoading({
				title: '加载中'
			});
			// 下载海报图片
			uni.downloadFile({
				url: self.qrcode_url,
				success(res) {
					uni.hideLoading();
					// 图片保存到本地
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success(data) {
							uni.showToast({
								title: type === 2 ? '图片已保存到相册，快去发朋友圈吧~' : '图片保存成功',
								icon: 'success',
								duration: 2000
							});
						},
						fail(err) {
							console.log(err.errMsg);
							if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
								uni.showToast({
									title: '请允许访问相册后重试',
									icon: 'none',
									duration: 1000
								});
								setTimeout(() => {
									uni.openSetting();
								}, 1000);
							}
						},
						complete(res) {
							console.log('complete');
						}
					});
				}
			});
		},
		/*微信好友*/
		onFriendShare() {
			this.show_tip = !this.show_tip
		}
	}
}
</script>

<style lang="scss" scoped>
	.qrcode {
		background-color: #F0F0F0;
		height: 100%;
		overflow: hidden;
	}
	.qrcode .poster {
		width: 80%;
		margin: 40rpx auto;
		box-shadow: 0 32rpx 64rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 10rpx;
	}
	.btns-wrap {
		position: fixed;
		height: 160rpx;
		left: 0;
		right: 0;
		bottom: 40rpx;
		display: flex;
		justify-content: center;
		z-index: 10;
	}
	.btns-wrap .box {
		margin: 0 48rpx;
		position: relative;
	}
	.btns-wrap .nav-icon {
		width: 80rpx;
		margin: 0 auto;
	}
	.btns-wrap .btns-name {
		color: #999999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.btns-wrap .box .tip {
		position: absolute;
		top: -128rpx;
		right: -192rpx;
		z-index: 11;
		width: 476rpx;
		height: 112rpx;
		margin: auto;
		background-image: url('../../../static/images/common/tip.png');
		background-size: 100% 100%;
	}
	.btns-wrap .box .tip .message {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 96rpx;
	}
	.btns-wrap .box .tip .message .finger {
		width: 48rpx;
		height: 48rpx;
	}
	.btns-wrap .box .tip .message .long {
		color: #1B1B1B;
		font-size: 28rpx;
		margin-left: 14rpx;
	}
</style>
